<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-product-detail">
      <!-- 顶部swiper -->
      <div>
        <swiper
          :indicator-dots="swiper.indicatorDots"
          :autoplay="swiper.autoplay"
          :interval="swiper.interval"
          :duration="swiper.duration"
          indicator-color="white"
          indicator-active-color="#ff3a35">
          <block v-for="(item,index) in swiper.imgUrls"  :key="index">
            <swiper-item>
              <image mode="aspectFit" :src="item" class="slide-image"/>
            </swiper-item>
          </block>
        </swiper>
      </div>

      <!--拼团 start-->
      <div class="ga-cell top-box">
        <div class="item">
          <div class="box">
            <span class="span1">拼团价</span>
            <span class="span2">¥</span>
            <span class="span3">29</span>
            <div>
              <p class="throughLine">¥39</p>
              <p>2人团</p>
            </div>
          </div>

          <div class="num">已团1255件</div>
        </div>
      </div>
      <!--拼团 end-->

      <!--第二件半价 || 秒杀价 || 新鲜预售satrt-->
      <!--<div class="ga-cell top-box">
        <div class="item">
          <div class="box">
            <span class="em">第二件半价</span>
            <span class="span2">¥</span>
            <span class="span3">29</span>
            <span class="throughLine mt10">¥39</span>
          </div>

          <div class="num">已抢1255件</div>
        </div>
      </div>-->
      <!--第二件半价 || 秒杀价 || 新鲜预售 end-->

      <div class="ga-cell type-box">
        <div class="item">
          <div>
            <p>
              <span class="btn primary">拼团包邮</span>
              <span class="title">新鲜海南荔枝1.5kg</span>
            </p>
            <p class="gGray mt10">甜甜的肉肉的</p>
          </div>

          <div class="share-box">
            <i class="gaIcon share"></i>
            <p class="gGray">分享</p>
          </div>
        </div>
      </div>

      <!--第二件半价 start-->
      <!--<div class="special-cell">
        <i class="gaIcon half"></i>
        <span class="span1">第二件半价</span>
        <span class="span2">准时抢好品 限量不等人</span>
      </div>-->
      <!--第二件半价 end-->

      <!--秒杀 start-->
      <!--<div class="special-cell">
        <i class="gaIcon clock"></i>
        <span class="span1">限时秒杀</span>
        <span class="span2">准时抢好品 限量不等人</span>
      </div>-->
      <!--秒杀 end-->

      <!--新鲜预售 start-->
      <!--<div class="special-cell">
        <span class="span1">新鲜预售</span>
        <span class="span2">准时抢好品 限量不等人</span>
      </div>-->
      <!--新鲜预售 end-->

      <div class="ga-cell mark-box">
        <div class="item">
          <ul class="mark-list clearfix">
           <li><i class="dot"></i>拼团包邮</li>
           <li><i class="dot"></i>假一赔十</li>
           <li><i class="dot"></i>7天退换</li>
           <li><i class="dot"></i>48小时发货</li>
          </ul>

          <span class="dots">...</span>
        </div>
      </div>

      <!--正在进行的拼团-->
      <h1 class="h1 mt10">正在进行的拼团，可直接参与</h1>
      <ul class="ga-cell now-bargain-list">
        <li class="item">
          <div class="img-box">
            <img mode="widthFix" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
          </div>
          <div class="box1">
            <p class="p1">拼团菓粉</p>
            <p class="p2">拼团价格太刺激啦~</p>
          </div>
          <div class="box2">
            <p class="p1">还差1人成团</p>
            <p class="p2">仅剩 23:09:32</p>
          </div>
          <a href="#" class="btn white">去参团</a>
        </li>
        <li class="item">
          <div class="img-box">
            <img mode="widthFix" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
          </div>
          <div class="box1">
            <p class="p1">拼团菓粉</p>
            <p class="p2">拼团价格太刺激啦~</p>
          </div>
          <div class="box2">
            <p class="p1">还差1人成团</p>
            <p class="p2">仅剩 23:09:32</p>
          </div>
          <a href="#" class="btn white">去参团</a>
        </li>
      </ul>

      <!--商品评价-->
      <div class="gCell h1 mt10">
        <div>商品评价（50）</div>
        <div>
          <span class="gOrange">99%</span>
          <span class="mr10">好评</span>
          <i class="icon-angle-right f26"></i>
        </div>
      </div>
      <ul class="comment-list">
        <li class="item">

          <div class="person">
            <div>
              <div class="img-box">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
              </div>
              <span class="name">guoa150****8528</span>
            </div>
          </div>

          <div class="con-box">
            终于收到我需要的宝贝了，东西很好，价美物廉，谢谢掌柜的！
            说实在，这是我购物来最满意的一次购物。无论是掌柜的态度
          </div>

          <ul class="img-list clear">
            <li class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </li>
            <li class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </li>
            <li class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </li>
            <li class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </li>
            <li class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </li>
            <li class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </li>
            <li class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </li>
          </ul>
        </li>
        <li class="item">

          <div class="person">
            <div>
              <div class="img-box">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
              </div>
              <span class="name">guoa150****8528</span>
            </div>
          </div>

          <div class="con-box">
            终于收到我需要的宝贝了，东西很好，价美物廉，谢谢掌柜的！
            说实在，这是我购物来最满意的一次购物。无论是掌柜的态度
          </div>
        </li>
      </ul>
      <a href="#" class="link-all">查看全部评价 <i class="icon-angle-right"></i></a>

      <!--拼团推荐-->
      <h2 class="h2 mt10">拼团推荐</h2>
      <ul class="ga-bargain-list">
        <li class="item">
          <a href="#">
            <div class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
            </div>
            <div class="con-box">
              <p class="p1">墨西哥墨西哥牛油果牛油果</p>
              <p class="p2">
                <span class="f30 gOrange">¥52.9</span>
                <span>已团235件</span>
              </p>
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <div class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
            </div>
            <div class="con-box">
              <p class="p1">墨西哥墨西哥牛油果牛油果</p>
              <p class="p2">
                <span class="f30 gOrange">¥52.9</span>
                <span>已团235件</span>
              </p>
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <div class="img-box">
              <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
            </div>
            <div class="con-box">
              <p class="p1">墨西哥墨西哥牛油果牛油果</p>
              <p class="p2">
                <span class="f30 gOrange">¥52.9</span>
                <span>已团235件</span>
              </p>
            </div>
          </a>
        </li>
      </ul>

      <!--详情内容-->
      <div class="pro-detail mt10">
        <img mode="widthFix" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
        <img mode="widthFix" src="http://ga-1255639017.file.myqcloud.com/images/test/img2.jpg" alt="">
      </div>

      <!--固定fixed底部-->
      <div class="ga-bottom-fixed">
        <div class="bottom">
          <!--tabs-->
          <ul class="tabs">
            <li class="item">
              <a href="#">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon1.png" alt="">
                <p>首页</p>
              </a>
            </li>
            <li class="item">
              <a href="#">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/star.png" alt="">
                <p>收藏</p>
              </a>
            </li>
            <li class="item">
              <a href="/pages/shopCart/main">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon3.png" alt="">
                <p>购物车</p>
              </a>
            </li>
          </ul>

          <div class="btn-box">
            <!--(1)售罄-->
            <!--<a href="#" class="btn btn">
              <p>已售击</p>
              <p>去首页看看</p>
            </a>-->

            <!--(2)开团-->
            <a href="#" class="btn btn1">
              <p>加入购物车</p>
            </a>
            <!--说明：未开团
              禁止点击:disable
            -->
            <a href="#" class="btn btn2">
              <p class="mt10">¥ 29</p>
              <p>一键开团</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      swiper: {
        imgUrls: [],
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000
      },
      data: []
    }
  },
  methods: {
    /** 接口数据 */
    async load () {
      let res = await this.$_api.detail.detail(this.$root.$mp.query.id)
      if (res.code === 200) {
        console.log(res)
        this.swiper.imgUrls = res.data.atlas
        this.data = res.data
      }
    }
  },

  created () {
  },
  mounted () {
    console.log(this.$root.$mp.query)

    this.load()
  }
}
</script>
